<script setup>

</script>

<template>
  <div class="whitebg ">
    <div class="imgscale">
      <img src="@/assets/images/imgscale.jpg">
    </div>
  </div>
</template>

<style scoped>
.whitebg {
  background: var(--card-bg-color, #fff);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  height: 168px;
}

.imgscale {
  margin:auto;
  text-align: center;
  max-width: 286px;
  max-height: 168px;
  overflow: hidden;
  position: relative;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.imgscale img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 0 5px #999;
  transition: all 0.3s ease-in-out;;
}
.imgscale img:hover {
  transform: scale(1.1);
}
</style>